<div class="space-y-6">
    <div class="flex justify-between items-center border-b border-gray-200 dark:border-gray-700 pb-3">
        <h3 class="text-lg font-medium text-gray-900 dark:text-white">创建新用户</h3>
        <button
            type="button"
            class="text-gray-400 hover:text-gray-500 focus:outline-none"
            x-data
            @click="$dispatch('close-modal')"
        >
            <span class="sr-only">关闭</span>
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
    </div>

    <form class="space-y-4" wire:submit="store">
        @csrf
        <!-- 用户名 -->
        <div>
            <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">用户名</label>
            <input type="text" name="name" id="name" required wire:model="name"
                   class="mt-1 block w-full px-4 py-3 text-base rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-indigo-500 focus:ring-indigo-500 @error('name') border-red-500 dark:border-red-400 @enderror">
            @error('name')
                <div class="mt-1 px-3 py-2 text-sm text-white bg-red-500 rounded-md dark:bg-red-700 dark:text-red-100">
                    {{ $message }}
                </div>
            @enderror
        </div>

        <!-- 邮箱 -->
        <div>
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">邮箱</label>
            <input type="email" name="email" id="email" required wire:model="email"
                   class="mt-1 block w-full px-4 py-3 text-base rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-indigo-500 focus:ring-indigo-500 @error('email') border-red-500 dark:border-red-400 @enderror">
            @error('email')
                <div class="mt-1 px-3 py-2 text-sm text-white bg-red-500 rounded-md dark:bg-red-700 dark:text-red-100">
                    {{ $message }}
                </div>
            @enderror
        </div>

        <!-- 密码 -->
        <div>
            <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">密码</label>
            <input type="password" name="password" id="password" required wire:model="password"
                   class="mt-1 block w-full px-4 py-3 text-base rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-indigo-500 focus:ring-indigo-500 @error('password') border-red-500 dark:border-red-400 @enderror">
            @error('password')
                <div class="mt-1 px-3 py-2 text-sm text-white bg-red-500 rounded-md dark:bg-red-700 dark:text-red-100">
                    {{ $message }}
                </div>
            @enderror
        </div>

        <!-- 按钮组 -->
        <div class="flex justify-end space-x-3 pt-4 border-t border-gray-200 dark:border-gray-700">
            <button
                type="button"
                class="px-5 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                @click="$dispatch('close-modal')"
            >
                取消
            </button>
            <button
                class="px-5 py-2.5 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                type="submit"
            >
                创建
            </button>
        </div>
    </form>
</div>
